{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">

<script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>
<script src="{% static 'plugins/vue1/vue.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>

{% endblock header_tail %}

{% block section_content %}
    <div class="box-header with-border">
        <h3 class="box-title">账号设置</h3>
    </div>
    <div class="row">
        <form role="form">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">账户信息</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>用户名</label>
                                    <input type="text" class="form-control" value="{{ user_name }}" disabled>
                                </div>
                                <div class="form-group">
                                    <label>邮箱</label>
                                    <input type="text" class="form-control" value="{{ e_mail }}" disabled>
                                </div>
                                <div class="form-group">
                                    <label>手机号</label>
                                    <input type="text" class="form-control" value="{{ phone_num }}" disabled>
                                </div>
                                <div class="form-group">
                                    <label>所在地区</label>
                                    <input type="text" class="form-control" value="{{ location }}" disabled>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>注册时间</label>
                                    <input type="text" class="form-control" value="{{ join_time }}" disabled>
                                </div>
                                <div class="form-group">
                                    <label>上次登录时间</label>
                                    <input type="text" class="form-control" value="{{ last_login_time }}" disabled>
                                </div>
                                <div class="form-group">
                                    <label>用户类型</label>
                                    <input type="text" class="form-control" value="{{ user_type }}" disabled>
                                </div>
                                <div class="form-group">
                                    <label>用户权限</label>
                                    <input type="text" class="form-control" value="{{ role }}" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <div class="row">
        <form role="form" method="post" action="{% url 'zhongbao_admin:change_real_information' %}">
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">实名信息<span style="padding-left: 10px; color: red;font-size: 10px;">注意!由于实名信息不正确造成无法正常审核与结算的后果，由用户自行承担。</span></h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        {% csrf_token %}
                        <div class="form-group">
                            <label>真实姓名</label>
                            <input name="real_name" type="text" class="form-control" placeholder="须与身份证号相对应"
                                   value="{{ real_name }}">
                        </div>
                        <div class="form-group">
                            <label>身份证号</label>
                            <input id="idCard" name="id_card_num" type="text" class="form-control"
                                   placeholder="须与真实姓名相对应" value="{{ id_card_num }}"
                                   onblur="verify.verifyIdCard(this)">
                            <label class="control-label" for="idCard" style="display: none;"><i
                                    class="fa fa-times-circle-o"></i>身份证号必须为18位，最后一位为x请大写</label>
                        </div>
                        <div class="form-group">
                            <label>支付宝实名</label>
                            <input name="alipay_name" type="text" class="form-control" placeholder="须与支付宝帐号相对应"
                                   value="{{ alipay_name }}">
                        </div>
                        <div class="form-group">
                            <label>支付宝帐号</label><span style="padding-left: 10px; color: red;font-size: 10px;">请再次确认填写的支付宝帐号是否已通过实名认证！</span>
                            <input name="alipay_count" type="text" class="form-control" placeholder="须与真实姓名相对应"
                                   value="{{ alipay_count }}">
                        </div>
                        <input type="submit" class="btn btn-primary" value="提交修改">
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </form>
        <form action="{% url 'zhongbao_admin:reset' %}" method="POST">{% csrf_token %}
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">修改密码</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>原密码</label>
                            <input name="old_password" type="password" class="form-control" placeholder="请输入帐号原密码">
                        </div>
                        <div class="form-group">
                            <label>新密码</label>
                            <input id="register_p1" name="password" type="password" class="form-control" placeholder="请输入新密码（字母、数字，至少6位）" onblur="verify.PasswordLenght(this)">
                            <label class="control-label" for="register_p1" style="display: none;"><i class="fa fa-times-circle-o"></i>必须为6位以上字母加数字</label>
                        </div>
                        <div class="form-group">
                            <label>确认密码</label>
                            <input id="re_reset" type="password" class="form-control" placeholder="请再输入一次新密码" onblur="verify.PasswordAccordance(this)">
                            <label class="control-label" for="re_reset" style="display: none;"><i class="fa fa-times-circle-o"></i>两次输入的密码不一致</label>
                        </div>
                        <input type="submit" class="btn btn-primary" value="重置密码">
                    </div>
                </div>
            </div>
        </form>
    </div>
<script src="{% static 'public/js/password.js' %}"></script>
<script>

    //表单验证规则
    var idCard_verifyReg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;

    //表单验证动作
    function showNotic(_this, focus) {
        $(_this).parents("form").find('.btn').attr('disabled', '');
        $(_this).parents(".form-group").addClass('has-error');
        $(_this).parents(".form-group").find(".control-label").fadeIn(100);
        if (focus) {
            $(_this).focus();
        }
    }//错误提示显示
    function hideNotic(_this) {
        $(_this).parents("form").find('.btn').removeAttr('disabled', '');
        $(_this).parents(".form-group").removeClass('has-error');
        $(_this).parents(".form-group").find(".control-label").fadeOut(100);
    }//错误提示隐藏

    var verify = {
        verifyIdCard: function (_this) {
            var _value = $(_this).val();
            if (!idCard_verifyReg.test(_value)) {
                showNotic(_this, true);
                _handle = false;
            } else {
                hideNotic(_this);
                _handle = true;
            }
            return _handle
        },//验证手机号码
        PasswordLenght: function (_this) {
            var _val = $(_this).val();
            var verify_data = password_test($(_this));
            if (!verify_data.tag) {
                showNotic(_this, true);
                _handle = false;
            } else {
                hideNotic(_this);
                _handle = true;
            }
        },//验证设置密码长度
        PasswordAccordance: function (_this) {
            var _val = $(_this).val();
            var password1 = $('#register_p1').val();
            if (_val != password1) {
                showNotic(_this);
                _handle = false;
            } else {
                hideNotic(_this);
                _handle = true;
            }
        },//验证设置密码是否一致
    }

    function changeColor(id, color) {
        //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    $('#myTasks').addClass("active");
    changeColor("#account_settings", "#00FF7F");
</script>
{% endblock section_content %}

